<template>
  <view class="search-page">
    <!-- 搜索输入区域 -->
    <view class="search-container">
      <view class="search-input-wrapper">
        <view class="search-input">
          <text class="search-icon">🔍</text>
          <input 
            class="input-field" 
            placeholder="搜索商品" 
            placeholder-class="placeholder"
            :focus="inputFocus"
            @focus="onInputFocus"
            @blur="onInputBlur"
            @input="onInputChange"
            v-model="searchText"
          />
        </view>
        <text class="cancel-btn" @click="performSearch">搜索</text>
      </view>
      
      <!-- 搜索建议 -->
      <view class="suggestions-container" v-if="showSuggestions && suggestions.length > 0">
        <view 
          class="suggestion-item" 
          v-for="(suggestion, index) in suggestions" 
          :key="index"
          @click="onSuggestionClick(suggestion)"
        >
          <text class="suggestion-text">{{ suggestion }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { get } from '@/utils/request.js'

export default {
  data() {
    return {
      searchText: '', // 搜索文本
      inputFocus: false, // 输入框焦点状态
      suggestions: [], // 搜索建议
      showSuggestions: false, // 是否显示建议
      searchTimeout: null // 防抖定时器
    }
  },

  methods: {
    // 输入框获得焦点
    onInputFocus() {
      this.inputFocus = true
      console.log('输入框获得焦点，键盘弹出')
    },
    
    // 输入框失去焦点
    onInputBlur() {
      this.inputFocus = false
      // 延迟隐藏建议，让用户有时间点击
      setTimeout(() => {
        this.showSuggestions = false
      }, 200)
      console.log('输入框失去焦点，键盘收起')
    },
    
    // 输入内容变化
    onInputChange(e) {
      this.searchText = e.detail.value
      console.log('搜索内容:', this.searchText)
      
      // 防抖处理，避免频繁请求
      if (this.searchTimeout) {
        clearTimeout(this.searchTimeout)
      }
      
      this.searchTimeout = setTimeout(() => {
        this.getSearchSuggestions()
      }, 300)
    },
    
    // 获取搜索建议
    async getSearchSuggestions() {
      if (!this.searchText.trim()) {
        this.suggestions = []
        this.showSuggestions = false
        return
      }
      
      try {
        // 使用封装好的请求方法
        const response = await get('/transaction/api/search/suggestions', {
          keyword: this.searchText
        })
        
        console.log('搜索建议响应:', response)
        if (response.code === 200) {
          this.suggestions = response.data || []
          this.showSuggestions = this.suggestions.length > 0
        } else {
          console.error('获取搜索建议失败:', response.msg)
          this.suggestions = []
          this.showSuggestions = false
        }
      } catch (err) {
        console.error('请求搜索建议失败:', err)
        this.suggestions = []
        this.showSuggestions = false
      }
    },
    
    // 点击搜索建议
    onSuggestionClick(suggestion) {
      console.log('点击了搜索建议:', suggestion)
      this.searchText = suggestion
      this.showSuggestions = false
      this.performSearch()
    },
    
    // 执行搜索
    performSearch() {
      if (this.searchText.trim()) {
        console.log('执行搜索:', this.searchText)
        this.showSuggestions = false
        
        // 跳转到搜索结果页
        uni.navigateTo({
          url: `/pages/category/search_results/search_results?keyword=${encodeURIComponent(this.searchText)}`
        })
      } else {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.search-page {
  background-color: #fff;
  min-height: 100vh;
}

/* 搜索输入区域 */
.search-container {
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: relative;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  margin-right: 20rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #999;
  margin-right: 20rpx;
}

.input-field {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  background-color: transparent;
}

.placeholder {
  font-size: 32rpx;
  color: #999;
}

.cancel-btn {
  font-size: 32rpx;
  color: #333;
  padding: 10rpx 20rpx;
}

/* 搜索建议样式 */
.suggestions-container {
  position: absolute;
  top: 100%;
  left: 30rpx;
  right: 30rpx;
  background-color: #fff;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400rpx;
  overflow-y: auto;
}

.suggestion-item {
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  cursor: pointer;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:active {
  background-color: #f5f5f5;
}

.suggestion-text {
  font-size: 28rpx;
  color: #333;
}

/* 点击效果 */
.cancel-btn:active {
  opacity: 0.7;
}
</style> 